<template>
	<view>
		<view class="upFile" @click="test">
			<span class="iconfont icon-yunshangchuan icon">上传文件</span>
		</view>
		<view class="filie-list">
			<view v-for="(item,index) in fileName" :key='index' class="file-sub">
				<view @click="handleClick(item)">{{item.name}}</view>
				<view @click="deleteFile(item,index)" class="delete">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "upload",
		data() {
			return {
				fileName: null
			};
		},
		prop: {
			pk: '',
		},
		methods: {
			test() {
				let _this = this
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.zip', '.xls', '.pdf', '.doc', '.jpg', '.png','.jpeg'],
					success: function(res) {
						if(res.tempFiles[0].size>2000000){
							uni.showToast({
								title:'文件不得大于2M,请重试',
								icon:'none'
							})
						}else{
							_this.fileName = res.tempFiles
							_this.$emit('select', _this.fileName)
						}
					}
				})
			},
			handleClick(item) {
				this.$emit('click', item)
			},
			deleteFile(item, index) {
				let newArr = []
				this.fileName.forEach((item1, index1) => {
					if (index1 != index) {
						newArr.push(item1)
					}
				})
				this.fileName = newArr
			},
			// upload(){
			//     let input = document.createElement('input');
			//     input.type = 'file'; 
			// 	input.style.width='200px'
			// 	input.style.position='absolute'
			// 	input.style.right='0'
			// 	input.style.opacity='0'
			// 	input.accept="image/*,application/vnd.ms-excel"
			//     this.$refs.input.$el.appendChild(input);
			//     input.onchange = (event) => {  
			//         this.fileName = event.path[0].files;
			// 		
			//     }  
			// },
			clickfn() {},
		},
		mounted() {
			// this.upload()
		},
		created() {}
	}
</script>

<style scoped>
	.upFile {
		position: relative;
		display: flex;
		flex-direction: row-reverse;
	}

	.icon {
		color: #007AFF;
		margin-right: 36rpx;
	}

	.filie-list {
		padding: 0 36rpx;
	}

	.file-sub {
		display: flex;
		justify-content: space-between;
		color: #434343;
		padding: 8rpx 10rpx;
		border-bottom: 1rpx solid #dcdcdc;
		margin-bottom: 5rpx;
	}

	.delete {
		color: red;
		align-items: center;
		font-size: 26rpx;
	}
</style>
